{%extend name="Public:layout"/%}

{%block name="title"%}
<h2 class="mb20">
    添加/修改
</h2>
{%/block%}

{%block name="contents"%}
<form action="{%:U('/admin/egg/save')%}" onsubmit="return false" stverify="true" erroappend="true" method="post"
      beforeSubFun="checkSaveRemote" enctype="multipart/form-data">
    <table class="table table-listing table-hovered">
        <tr>
          <td class="span4"><span class="text-red">*</span>所属杂志期号：</td>
          <td>
            <input type="hidden" name="egg_id" value="{%$info['egg_id']%}" />
              <select class="st-dropdown" name="issue_id" data-config="zIndex:9001">
                  {%notempty name="issueInfo"%}
                  <option value="{%$issueInfo['issue_id']%}">{%$issueInfo['issue_number']%}</option>
                  {%/notempty%}
                  {%volist name="list" id="vo"%}
                  <option value="{%$vo.issue_id%}">{%$vo.issue_number%}</option>
                  {%/volist%}
              </select>
          </td>
        </tr>
        <tr>
          <td class="span4"><span class="text-red">*</span>彩蛋名：</td>
          <td>
            <input class="input" type="text" name="egg_name" byteml="true" ml="1-250" opt="rq ml" value="{%$info['egg_name']%}"/>
          </td>
        </tr>
        <tr>
          <td class="span4">自动上线时间：</td>
          <td>
              <script type="text/javascript">
              function showPublishInput(status) {
                  if (status) {
                      $('#js_publishInput').show();
                  } else {
                      $('#js_publishInput').hide();
                  }
              }
              </script>
              <input onclick="showPublishInput(this.checked)" type="checkbox" {%neq name="info['auto_publish_time']" value="0"%}checked="checked"{%/neq%} name="auto_publish_status" value="1" /> 开启
              <span id="js_publishInput" {%eq name="info['auto_publish_time']" value="0"%}style="display:none"{%/eq%}>
              <input class="input" type="text" name="auto_publish_time" id="_auto_calender" value="{%$info['auto_publish_time']|date='Y-m-d',###%}"/>
              <select class="st-dropdown" name="auto_publish_hour" data-config="zIndex:9001">
                  {%volist name="auto_publish_hours" id="vo"%}
                  <option value="{%$vo.time%}" {%if condition="$vo.time == date('H:i', $info['auto_publish_time'])"%}selected{%/if%}>{%$vo.text%}</option>
                  {%/volist%}
              </select>
              </span>
              <div verify="1" class="inline">
                <div class="alert alert-info">
                  <i class="icon"></i>
                  <span>请仔细选择时间</span>
                </div>
              </div>
          </td>
        </tr>
        <tr>
          <td class="span4"><span class="text-red">*</span>来自作品：</td>
          <td>
            <input class="input" type="text" name="work_title" byteml="true" ml="1-250" opt="rq ml" value="{%$info['work_title']%}"/>
          </td>
        </tr>
        <tr>
          <td class="span4"><span class="text-red">*</span>彩蛋图片：</td>
          <td>
              <a class="btn btn-blue mr5" href="javascript:;" onclick="ST.todo('upImageEgg', 'egg_img')">上传</a>
              <div verify="1" class="inline">
                <div class="alert alert-info">
                  <i class="icon"></i>
                  <span>建议图片宽高：595*199</span>
                </div>
              </div>
              <br />
              <input type="hidden" name="egg_img" value="{%$info['egg_img']%}" />
              <img src="{%$info['egg_img']%}" alt="" height="100" />
          </td>
        </tr>
        <tr>
          <td class="span4"><span class="text-red">*</span>分享到第三方的图片：</td>
          <td>
              <a class="btn btn-blue mr5" href="javascript:;" onclick="ST.todo('upImageEgg', 'share_img')">上传</a>
              <div verify="1" class="inline">
                <div class="alert alert-info">
                  <i class="icon"></i>
                  <span>建议图片宽高：140*140</span>
                </div>
              </div>
              <br />
              <input type="hidden" name="share_img" value="{%$info['share_img']%}" />
              <img src="{%$info['share_img']%}" alt="" height="100" />
          </td>
        </tr>
        <tr>
          <td class="span4"><span class="text-red">*</span>彩蛋类型：</td>
          <td>
              <label for="radio1" onclick="ST.todo('changeType', 'video')">
                <!--同组radio需添加opt="nrq"、只需要在一个radio上添加opt="radio"-->
                <input id="radio1" type="radio" name="type" value="video" opt="nrq" {%eq name="info['type']" value="video"%}checked{%/eq%} />
                视频
              </label>
              <label for="radio2" onclick="ST.todo('changeType', 'sound')">
                <input id="radio2" type="radio" name="type" value="sound" opt="nrq" {%eq name="info['type']" value="sound"%}checked{%/eq%} />
                音频
              </label>
              <label for="radio4" onclick="ST.todo('changeType', 'imgs')">
                <input id="radio4" type="radio" name="type" value="imgs" opt="radio" {%eq name="info['type']" value="imgs"%}checked{%/eq%} />
                多图
              </label>
              <label for="radio5" onclick="ST.todo('changeType', 'web')">
                <input id="radio5" type="radio" name="type" value="web" opt="radio" {%eq name="info['type']" value="web"%}checked{%/eq%} />
                网页
                  <input type="hidden" name="redirect_url" byteml="true" value="{%$info['redirect_url']%}"/>
                  <input type="hidden" name="hide_bottom_bar" value="{%$info['hide_bottom_bar']%}" />
              </label>
              <div verify="1" class="inline">
                <div class="alert alert-info">
                  <i class="icon"></i>
                  <span>建议视频、音频、单图的背景宽高：480*309；音频的小图宽高：263*263；长图图片宽度不小于320</span>
                </div>
              </div>
          </td>
        </tr>
        <tr>
          <td class="span4"><span class="text-red">*</span>彩蛋内容：</td>
          <td id="js_changeType">
              <div style="display: none" id="js_video">
                  <a class="btn btn-blue mr5" href="javascript:;" onclick="ST.todo('upFiles')">上传视频</a><br />
                  <a class="btn btn-blue mr5" href="javascript:;" onclick="ST.todo('upBg')">视频背景</a><br />
                  视频背景：<span id="js_video_bg">{%$info['video_bg']%}</span>
                  <input type="hidden" name="video_bg" value="{%$info['video_bg']%}" />
              </div>
              <div style="display: none" id="js_sound">
                  <a class="btn btn-blue mr5" href="javascript:;" onclick="ST.todo('upFiles')">上传音频</a><br />
                  <a class="btn btn-blue mr5" href="javascript:;" onclick="ST.todo('upBg')">音频背景</a><br />
                  <a class="btn btn-blue mr5" href="javascript:;" onclick="ST.todo('upSoundImg')">音频小图</a><br />
                  音频背景：<span id="js_sound_bg">{%$info['sound_bg']%}</span><br />
                  音频小图：<span id="js_sound_img">{%$info['sound_img']%}</span>
                  <input type="hidden" name="sound_bg" value="{%$info['sound_bg']%}" />
                  <input type="hidden" name="sound_img" value="{%$info['sound_img']%}" />
              </div>
              <div style="display: none" id="js_img">
                  <a class="btn btn-blue mr5" href="javascript:;" onclick="ST.todo('upImage')">上传单图</a><br />
              </div>
              <div style="display: none" id="js_imgs">
                  <a class="btn btn-blue mr5" href="javascript:;" onclick="ST.todo('upImage')">上传多图</a><br />
              </div>
              <p id="js_content">{%$info['content']%}</p>
              <input type="hidden" name="content" value="{%$info['content']%}" />
              <input type="hidden" name="duration" value="{%$info['duration']%}" />
          </td>
        </tr>
        <tr id="js_description_tr">
          <td class="span4"><span class="text-red">*</span>彩蛋内容：</td>
          <td>
              <script type="text/plain" id="js_description" name="description">{%$info['description']%}</script>
          </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input class="btn btn-blue" type="submit" value="提交">
                <a href="javascript:history.back()" class="btn">返回上一层</a>
            </td>
        </tr>
    </table>
</form>
{%/block%}

{%block name="js"%}
<script type="text/plain" id="js_editor_upload" style="display:none;"></script>
<script type="text/plain" id="js_editor_upload_egg" style="display:none;"></script>
<script type="text/plain" id="js_editor_upload_bg" style="display:none;"></script>
<script type="text/plain" id="js_editor_upload_sound_img" style="display:none;"></script>
<script src="__JAVASCRIPT__/ueditor/ueditor.config.js"></script>
<script src="__JAVASCRIPT__/ueditor/ueditor.all.min.js"></script>
<script src="__JAVASCRIPT__/ueditor/crawler_content.js"></script>
<script src="__JAVASCRIPT__/Sortable.min.js"></script>
<script src="__JAVASCRIPT__/ST.Calender.js"></script>
<script src="__JAVASCRIPT__/ST.TimePicker.js"></script>
<script type="text/javascript">
    var this_year = new Date().getFullYear();
    var _auto_calender = new ST.Calender("_auto_calender", "", this_year, this_year);
    _auto_calender.timePicker = false;

    var js_description = UE.getEditor('js_description', {serverUrl: "{%:U('admin/index/upload')%}"});
    js_description.ready(function () {
        js_description.addListener("beforePaste", function(type, data) {
            data.html = data.html.replace(/(position|top|left|right|bottom)[\t\s]*:[^;"]+/g, '');
            console.log(data.html);
        })
    })

    var ORIGINAL_IMGS = {};
    function showImg(img) {
        ST.$Fb = ST.msgbox({title:'',url:img},[],500,600);
    }
    function image_sort(ids) {
        if ($('input[name=type]:checked').val() == 'imgs') {
            var arr = $('input[name=content]').val().split(','), html = '';
            $.each(arr, function(k, v) {
                var original = ORIGINAL_IMGS[v] ? ORIGINAL_IMGS[v] : '';
                html += '<em style="width: 80px; height: 100px; display: inline-block; text-align: center; cursor: move;"><img file="'
                        + v + '" id="showImg_' + k + '" onclick="showImg(\'' + ST.getRatableImg(v, 450) +'\')" src="'
                        + '/admin/public/thumb/width/80/height/100?image=' + v
                        + '" /><br><a href="javascript:;" class="js-remove">删除</a><br><span style="width: 80px; overflow: hidden; height: 40px; display: block; word-break: break-all;">' + original + '</span></em>';
            });
            $('#js_content').html(html);
            new Sortable(document.getElementById('js_content'), {
                filter: '.js-remove',
                onFilter: function (evt) {
                    $(evt.item).parent().remove();
                    var value = '', dot = '';
                    $('#js_content').find('img').each(function() {
                        value += dot + $(this).attr('file');
                        dot = ',';
                    });
                    $('input[name=content]').val(value);
                },
                onEnd:function() {
                    var value = '', dot = '';
                    $('#js_content').find('img').each(function() {
                        value += dot + $(this).attr('file');
                        dot = ',';
                    });
                    $('input[name=content]').val(value);
                }
            });
        }
    }
    image_sort();

    //视频 音频 图片 长图
    var js_editor_upload = UE.getEditor('js_editor_upload', {serverUrl: "{%:U('admin/index/upload?imageActionName=upload_caidan')%}"});
    js_editor_upload.ready(function () {
        js_editor_upload.hide();//隐藏编辑器
        js_editor_upload.addListener('beforeInsertImage', function (t, arg) {
            var value = '', dot = '';
            //console.log(arg);
            $.each(arg, function(k, v) {
                value += dot + v.src;
                ORIGINAL_IMGS[v.src] = v.alt;
                dot = ',';
            })
            var str_content = $('input[name=content]').val() + ',' + value;
            $('input[name=content]').val(str_content.replace(/^,/, ''));
            image_sort();
        });
        js_editor_upload.addListener('afterUpfile', function (t, arg) {
            var value = '', dot = '';
            $.each(arg, function(k, v) {
                value += dot + v.url;
                dot = ',';
            })
            $('input[name=content]').val(value);
            $('input[name=duration]').val(arg[0].duration);
            $('#js_content').html(value);
        });
    });

    //彩蛋图片
    var js_editor_upload_egg = UE.getEditor('js_editor_upload_egg', {serverUrl: "{%:U('admin/index/upload?imageActionName=upload_caidan')%}"});
    js_editor_upload_egg.ready(function () {
        js_editor_upload_egg.hide();//隐藏编辑器
        js_editor_upload_egg.addListener('beforeInsertImage', function (t, arg) {
            $('input[name='+ST.upImageEggInput+']').val(arg[0].src);
            $('input[name='+ST.upImageEggInput+']').parent().find('img').attr('src', arg[0].src);
        });
        js_editor_upload_egg.addListener('afterUpfile', function (t, arg) {
        });
    });

    //视频背景，音频背景
    var js_editor_upload_bg = UE.getEditor('js_editor_upload_bg', {serverUrl: "{%:U('admin/index/upload?imageActionName=upload_caidan&a=1')%}"});
    js_editor_upload_bg.ready(function () {
        js_editor_upload_bg.hide();//隐藏编辑器
        js_editor_upload_bg.addListener('beforeInsertImage', function (t, arg) {
            if ($('#js_video').css('display') != 'none') {
                $('input[name=video_bg]').val(arg[0].src);
                $('#js_video_bg').html(arg[0].src);
            } else {
                $('input[name=sound_bg]').val(arg[0].src);
                $('#js_sound_bg').html(arg[0].src);
            }
        });
        js_editor_upload_bg.addListener('afterUpfile', function (t, arg) {
        });
    });

    //音频小图
    var js_editor_upload_sound_img = UE.getEditor('js_editor_upload_sound_img', {serverUrl: "{%:U('admin/index/upload?imageActionName=upload_sound_img')%}"});
    js_editor_upload_sound_img.ready(function () {
        js_editor_upload_sound_img.hide();//隐藏编辑器
        js_editor_upload_sound_img.addListener('beforeInsertImage', function (t, arg) {
            $('input[name=sound_img]').val(arg[0].src);
            $('#js_sound_img').html(arg[0].src);
        });
        js_editor_upload_sound_img.addListener('afterUpfile', function (t, arg) {
        });
    });

    $.extend(ST, {
        checkSaveRemote:function() {
            var content = js_description.getContent();
            var arr = content.match(/[^\-]src="(http[^"]+)/);
            console.log(arr);
            if (arr && arr.length > 1 && !/\.(manyule|baidu)\.com/.test(arr[1])) {
                ST.tipMsg({error:'正在保存编辑器中的外链图片，请稍候'}, 3000);
                return false;
            } else {
                $('textarea[name=description]').val(content);
                return true;
            }
        },
        changeType:function (type) {
            $('#js_changeType div').hide();
            $('#js_' + type).show();
            if (type == 'imgs') {
                $('#js_description_tr').hide();
            } else {
                $('#js_description_tr').show();
            }
        },
        upImageEggInput: '',
        upImageEgg: function(input) {
            ST.upImageEggInput = input;
            var myImage = js_editor_upload_egg.getDialog("insertimage");
            myImage.open();
        },
        upImage: function() {
            var myImage = js_editor_upload.getDialog("insertimage");
            myImage.open();
        },
        upFiles: function() {
            var myFiles = js_editor_upload.getDialog("attachment");
            myFiles.open();
        },
        upBg: function() {
            var myImage = js_editor_upload_bg.getDialog("insertimage");
            myImage.open();
        },
        upSoundImg: function() {
            var myImage = js_editor_upload_sound_img.getDialog("insertimage");
            myImage.open();
        }
    });
    ST.init();
    var type = "{%$info['type']%}";
    ST.todo('changeType', !type ? 'video' : type);
</script>
{%/block%}
